    <template>
      <div id="app">
        <div class="search-container">
          <input v-model="keyword" placeholder="输入地址后点击搜索或点击地图" />
          <button @click="searchAddress">搜索</button>
          <button @click="qd">确定</button>
        </div>
        <div id="MapContainer" ref="mapContainerRef"></div>
      </div>
    </template>

    <script setup>
    /* global AMap */
    import AMapLoader from '@amap/amap-jsapi-loader'
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { useWarehouseStore } from '@/storejs/warehouseStore';

    //插件路由器实例
    var router = useRouter();


    const keyword = ref('')
    const mapContainerRef = ref()
    let map = null
    let placeSearch = null

    onMounted(() => {
      window._AMapSecurityConfig = {
        securityJsCode: '27ac62c83614fd39e47f64c024fe4b1d'
      }

      AMapLoader.load({
        key: 'deecd3033a3197d206b003f7e693aa01',
        version: '2.0',
        plugins: ['AMap.PlaceSearch', 'AMap.Geocoder']
      }).then(() => {
        map = new AMap.Map('MapContainer', { zoom: 11, center: [112.982279, 28.19409] })
        placeSearch = new AMap.PlaceSearch({ city: '长沙', radius: 5000 })

        /* 点击地图 → 写入地址 */
        map.on('click', (e) => {
          const lnglat = [e.lnglat.lng, e.lnglat.lat]
          AMap.plugin('AMap.Geocoder', () => {
            new AMap.Geocoder().getAddress(lnglat, (status, result) => {
              if (status === 'complete') keyword.value = result.regeocode.formattedAddress
            })
          })
        })
      })
    })

    /* 手动搜索地址并定位 */
    function searchAddress() {
      if (!keyword.value.trim()) return alert('请输入地址')
      placeSearch.search(keyword.value, (status, result) => {
        if (status === 'complete' && result.poiList.pois.length) {
          const poi = result.poiList.pois[0]
          map.setCenter([poi.location.lng, poi.location.lat])
          map.setZoom(15)
          keyword.value = poi.name + ' - ' + poi.address
        } else {
          alert('未找到该地址')
        }
      })
    }


    //跳转
    function qd(){
      const warehouseStore = useWarehouseStore();
      warehouseStore.keyword = keyword.value;
    
      // 地图页面返回时
      //router.replace('/main/DB/WarehouseInfo')
      router.go(-1);
    }


    </script>

    <style scoped>
    #MapContainer {
      width: 100%;
      height: 80vh;
    }

    .search-container {
      position: absolute;
      top: 150px;
      left: 198px;
      z-index: 100;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    }

    .search-container input {
      width: 240px;
      padding: 6px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .search-container button {
      margin-left: 5px;
      padding: 6px 12px;
      background: #42b983;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    </style>
